.header {
    box-sizing: border-box;
    background-color: var(--accent-el);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height-normal);
    display: grid;
    grid-template-columns: 0.2fr 1fr calc(2 * clamp(90px,18vw,180px) + clamp(10px, 2vw, 20px));
    gap: 0 clamp(10px, 2vw, 20px);
    flex-wrap: wrap;
    align-items: center;
    padding: 0 clamp(10px, 2vw, 20px);
    border-bottom: 1px solid var(--pale-txt);
    z-index: 3;

    .navshortcut {
        width: 100%;
        height: clamp(25px,5vw,50px);
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: clamp(5px, 1vw, 10px);
        font-size: 40px;
    }
}

@media (max-width: 1240px) {
    .header {
        grid-template-columns: 1fr calc(2 * clamp(90px,18vw,180px) + clamp(10px, 2vw, 20px));
        grid-template-rows: 1fr 1fr;
        height: calc(2 * var(--header-height-normal) - clamp(25px, 3vw, 30px));
        padding: clamp(2.5px, 0.5vw, 5px) clamp(10px, 2vw, 20px);
    }
}